<template>
    <div>
        <div class="wrapper">
            <div class="pic">
                <div class="box">
                    <div class="time" style="font-size: 20px;">点击进入广告</div>
                    <h2>广告位</h2>
                </div>
                <div class="jinru">
                    <div class="title">全网最多的壁纸</div>
                    <router-link to="money"><button>点击进入</button></router-link>
                </div>
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>
<style lang="less" scoped>
@import '../common/less/varible.less';
* {
    font-family: @fontfamily;
    padding: 0;
    margin: 0;
    list-style: none;
    overflow-y: hidden;
    overflow-x: hidden;

}

.wrapper {
    width: 100%;
    // background-color: rgba(248, 219, 222, .4);
    height: 800px;
    margin-top: -120px;
    overflow-y: hidden;
    overflow-x: hidden;

}

.pic img {
    position: relative;
    height: 110%;
    width: 100%;
    object-fit: cover;
    position: fixed;
    left: 0;
    top: 0;
    z-index: -1;
    overflow: hidden;
}

.box {
    position: absolute;
    top: 20%;
    left: 18%;
    height: 400px;
    width: 250px;
    border: 2px solid black;
    background-color: white;
    z-index: 100;
}

.box h2 {
    font-size: 26px;
    position: absolute;
    left: 30%;
    top: 38%;
}


.box .time {
    position: absolute;
    left: 0;
    top: 0;
    height: 30px;
    width: 120px;
}

.jinru {
    margin: 30% auto;
    height: 400px;
    width: 300px;
    position: relative;
    z-index: 50;
}

.jinru .title {
    position: absolute;
    font-size: 26px;
    height: 50px;
    width: 230px;
    border-radius: 10px;
    background-color: coral;
    color: white;
    border: transparent;
    top: 50%;
    left: 10%;
    text-align: center;
    line-height: 40px;
    padding-top: 6px;
}

.jinru button {
    position: absolute;
    font-size: 30px;
    height: 60px;
    width: 160px;
    border-radius: 10px;
    background-color: coral;
    color: white;
    border: transparent;
    cursor: pointer;
    top: 80%;
    left: 20%;
}
</style>
<script>
import router from '@/router';
import MoneyView from '@/views/MoneyView.vue';
export default {
    components:{
        MoneyView,
    },
    data() {
        return {
            message: 'Hello Vue!'
        };
    },
    mounted() {
        // 在这个生命周期钩子中执行JavaScript代码
        console.log(this.message); // 正确访问Vue实例的数据属性
        var time = document.querySelector(".time");
        var box = document.querySelector(".box");
        var isSend = true;
        var seconds = 6;
        var timer = null;
        time.onclick = function () {
            console.log(111)
            if (isSend && timer == null) {
                console.log("计算剩余时间...")
                downTime();
                timer = setInterval(downTime, 1000);
            }
        }

        function downTime() {
            seconds--;
            if (seconds < 0) {
                isSend = true;
                time.innerHTML = "X";
                return;

            } console.log(seconds);
            time.innerHTML = "剩余" + seconds + "秒"
            time.className = "time";
            time.onclick = function () {
                if (isSend = true) {
                    console.log(111)
                    box.style.display = "none"
                }
            }

        }
    }
};

</script>